<template>
  <div>
    <transition name="fade"
                :duration="{enter: 1000, leave: 0}"
                enter-active-class="animated fadeIn">
      <PopUpSearch class="size-control" v-if="this.$store.state.moduleA.showSearch"></PopUpSearch>
    </transition>
    <div v-show="!this.$store.state.moduleA.showSearch">
      <header>
        <h3 class="p-2 position-relative text-center" style="background-color: #ffec68;">我的订单
          <small class="position-absolute"
                 @click="searchShow"
                 style="right: 1rem; top: 0.7rem;">
            <i class="fa fa-search"></i>
          </small>
        </h3>
        <div class="d-flex text-center">
          <router-link class="w-100 btn btn-primary" role="button" to="all">全部</router-link>
          <router-link class="w-100 btn btn-light" to="needPay">待付款</router-link>
          <router-link class="w-100 btn btn-primary" to="needUse">待使用</router-link>
          <router-link class="w-100 btn btn-light" to="needComment">待评价</router-link>
          <router-link class="w-100 btn btn-primary" to="needService">退款/售后</router-link>
        </div>
        <!--<form class="form-inline" style="height: 2.5rem;">-->
        <!--<input id="input" type="search" class="form-control" style="width: 80%;">-->
        <!--<label for="input" class="ml-1 mb-0" style="width: 10%">Search</label>-->
        <!--</form>-->
      </header>
      <div>This is order page</div>
      <p>Here is the view for child's router component. Down</p>
      <!--<span>{{$route.params}}</span>-->
      <router-view></router-view>
      <p>Here is the view for child's router component. Up.</p>
      <footer class="show-footer bg-dark text-center">
        <div class="d-flex footer-menu-control">
          <router-link to="/home" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-drivers-license-o pr-1"></i>Home</router-link>
          <router-link to="/more" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-plus-circle pr-1"></i>More</router-link>
          <router-link to="/order/all" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-sticky-note-o pr-1"></i>Order</router-link>
          <router-link to="/userInfo" role="button" class="btn w-100 p-2 text-light"><i class="fa fa-user-o pr-1"></i>Me</router-link>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
// import {mapActions} from 'vuex'
// import API from '../vuex/mutation_type'
import PopUpSearch from './order/PopUpSearch'
export default {
  name: 'Order',
  components: {
    PopUpSearch
  },
  data: function () {
    return {
      // PopupSearch: this.$store.state.moduleA.showSearch
    }
  },
  methods: {
    // ...mapActions(['showSearch']),
    searchShow: function () {
      //  这里要使用module内的变量，所以在使用state的时候要，使用state.module_x来获取状态
      let judge = !this.$store.state.moduleA.showSearch
      // this.PopupSearch = judge
      // console.log(judge)
      //  action要使用dispatch来触发分发效果；当然如果没有载荷，可以直接使用mapActions函数来触发
      this.$store.dispatch({
        type: 'showSearch',
        judge: judge
      })
    }
  }
}
</script>

<style scoped>
  h3 small:hover{
    cursor: pointer;
  }
  .size-control{
    height: 100vh;
    width: 100vw;
  }
  .show-footer{
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0;
    margin-top: 2rem;
  }
</style>
